<template>
  <!-- 双列 -->
  <view class="data-con w-100 ss-flex justify-between flex-wrap"
        v-if="data.mode === 2">
    <view class="item-data bg-white" v-for="(item,index) in state.list" :key="index"
          :style="[{ marginBottom: data.space * 2 + 'rpx',borderTopLeftRadius:data.borderRadiusTop * 2 + 'rpx',borderTopRightRadius:data.borderRadiusTop * 2 + 'rpx',borderBottomLeftRadius:data.borderRadiusTop * 2 + 'rpx',borderBottomRightRadius:data.borderRadiusTop * 2 + 'rpx'}]"
          @click="onDetails(item)">
      <image class="title-image"
             :style="{borderTopLeftRadius:data.borderRadiusTop * 2 + 'rpx',borderTopRightRadius:data.borderRadiusTop * 2 + 'rpx'}"
             :src="item.image"
             mode="aspectFill" />
      <view class="item-info ss-p-12">
        <view class="item-name ss-line-1 ss-font-32 " :style="{color:data.goodsFields.title.color}">
          {{ item.title }}
        </view>
        <view class="item-exp ss-flex justify-between ss-m-t-8" :style="{color:data.goodsFields.subtitle.color}">
          <view class="item-exp-sum ss-font-20">{{ item.star }}</view>
        </view>
        <view class=" ss-flex justify-between align-center  ss-m-t-12">
          <view class="f-b ss-font-36" :style="{color:data.goodsFields.price.color}">
            ￥{{ parseInt(item.price[0]) }}
          </view>
          <view class="address ss-font-20 ss-flex justify-center align-center"
                :style="{color:data.goodsFields.address.color}">
            <image class="address-image ss-m-r-12"
                   src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/13mansion/13mansion/custom-address.png"></image>
            <view class="address-text">
              {{ item.province }}·{{ item.sub_title }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <!-- 单列 -->
  <view class="goods-list" v-else>
    <view class="goods-item w-100 bg-white" v-for="(item,index) in state.list" :key="index"
          @click="onDetails(item)"
          :style="[{ marginBottom: data.space * 2 + 'rpx',borderTopLeftRadius:data.borderRadiusTop * 2 + 'rpx',borderTopRightRadius:data.borderRadiusTop * 2 + 'rpx',borderBottomLeftRadius:data.borderRadiusTop * 2 + 'rpx',borderBottomRightRadius:data.borderRadiusTop * 2 + 'rpx'}]">
      <image class="goods-image"
             :style="{borderTopLeftRadius:data.borderRadiusTop * 2 + 'rpx',borderTopRightRadius:data.borderRadiusTop * 2 + 'rpx'}"
             :src="item.image"
             mode="aspectFill" />
      <view class="ss-line-1 ss-font-36 f-b ss-m-t-14 ss-p-x-18" :style="{color:data.goodsFields.title.color}">
        {{ item.title }}
      </view>
      <view class="ss-font-28 ss-m-t-12 ss-p-x-18" :style="{color:data.goodsFields.subtitle.color}">
        {{ item.star }}
      </view>
      <view class="ss-flex justify-between align-end ss-p-x-18">
        <view class="address ss-font-28 ss-flex justify-center align-end"
              :style="{color:data.goodsFields.address.color}">
          <image class="address-image-column ss-m-r-12"
                 src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/13mansion/13mansion/custom-address.png"></image>
          <view class="">
            {{ item.province }}·{{ item.sub_title }}
          </view>
        </view>
        <view class="btn ss-font-32"
              :style="{background:`linear-gradient(90deg,${data.buyNowStyle.color1},${data.buyNowStyle.color2})`}">
          {{ data.buyNowStyle.text }}
        </view>
      </view>
    </view>
  </view>
  <!-- 加载更多 -->
  <uni-load-more v-if="state.total > 0" :content-text="{
        contentdown: '上拉加载更多',
      }" :status="state.loadStatus" @tap="loadmore" />
</template>

<script setup>
  import {
    onMounted,
    reactive,
  } from 'vue';
  import {
    onReachBottom,
  } from '@dcloudio/uni-app';
  import sheep from '@/sheep';

  const props = defineProps({
    data: {
      type: Object,
      default() {
      },
    },
    styles: {
      type: Object,
      default() {
      },
    },
  });

  const state = reactive({
    page: 1,
    list: [],
    total: 0,
    loadStatus: '',
  });
  onMounted(() => {
    getList();
  });

  onReachBottom(() => {
    loadmore();
  });

  const loadmore = () => {
    if (state.loadStatus !== 'noMore') {
      state.page++;
      getList();
    }
  };
  const getList = async () => {
    state.loadStatus = 'loading';
    const response = await sheep.$api.goods.hotelCustomList({
      ids: props.data.goodsIds.join(','),
      type: 'select',
      page: state.page,
    });
    if (response.error === 0) {
      state.list = state.list.concat(response.data.data);
      state.total = response.data.total;
      if (response.data.current_page < response.data.last_page) {
        state.loadStatus = 'more';
      } else {
        state.loadStatus = 'noMore';
      }
    }
  };
  const onDetails = (item) => {
    let date = new Date();
    let begin_date = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    let currentDate = new Date();
    let nextWeek = currentDate.getDate() + 1; // 将当前日期加上1天
    currentDate.setDate(nextWeek); // 设置日期为加1天后的日期
    let end_date = `${currentDate.getFullYear()}/${currentDate.getMonth() + 1}/${currentDate.getDate()}`;
    sheep.$router.go('/pagesChlid/hotel_details', {
      id: item.id,
      begin_date: begin_date,
      end_date: end_date,
    });
  };
</script>

<style lang="scss" scoped>

  view {
    box-sizing: border-box;
  }

  .data-con {
    .item-data {
      width: 344rpx;

      .title-image {
        width: 100%;
        height: 344rpx;
      }
    }
  }

  .address-image {
    width: 30rpx;
    height: 30rpx;
  }

  .address-image-column {
    width: 40rpx;
    height: 40rpx;
  }

  .address-text {
    height: 40rpx;
    line-height: 40rpx;
  }

  .goods-item {
    width: 100%;
    height: 626rpx;

    .goods-image {
      width: 100%;
      height: 406rpx;
    }
  }

  .btn {

    width: 218rpx;
    height: 74rpx;
    border-radius: 10rpx;
    color: #fff;
    text-align: center;
    line-height: 74rpx;
  }

  .f-b {
    font-weight: bold;
  }
</style>